import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Tree } from 'antd';
const TreeNode = Tree.TreeNode;

// const Dialog = ({ onCreate, checkedKeys, treeData, ...modalProps}) => {
//     const handleOk = () => {
//        onCreate();
//     };
//
//     const modalOpts = {
//         ...modalProps,
//         onOk: handleOk
//     };
//     const onCheck = (checkedKeys) => {
//
//         console.log('onCheck', checkedKeys);
//     };
//
//     const renderTreeNodes = (data) => {
//         return data.map((item) => {
//             if (item.children) {
//                 return (
//                     <TreeNode title={item.path} key={item.id} dataRef={item}>
//                         {renderTreeNodes(item.children)}
//                     </TreeNode>
//                 );
//             }
//             return <TreeNode title={item.path} key={item.id} />;
//         });
//     };
//
//     return (
//         <Modal {...modalOpts}>
//             <Tree
//                 checkable
//                 onCheck={onCheck}
//                 checkedKeys={checkedKeys}
//             >
//                 {renderTreeNodes(treeData)}
//             </Tree>
//         </Modal>
//     )
// };

class Dialog extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            autoExpandParent: true,
            checkedKeys: props.checkedKeys,
        };
    }

    componentWillReceiveProps(nextProps){
        this.setState({
            checkedKeys:nextProps.checkedKeys
        })
    }

    handleOk = () => {
        const { onCreate } = this.props;
        const { checkedKeys } = this.state;
        onCreate(checkedKeys);
    };

    onCheck = (checkedKeys) => {
        this.setState({ checkedKeys });
    };

    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode  title={item.name} key={item.id} dataRef={item} >
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={item.name} key={item.id} />;
        });
    };

    render() {
        const { onCreate, treeData, ...modalProps } = this.props;
        const modalOptions = {
            ...modalProps,
            onOk: this.handleOk
        };
        return (
            <Modal {...modalOptions}>
                <Tree
                    checkable
                    onCheck={ this.onCheck }
                    checkedKeys={ this.state.checkedKeys }
                    autoExpandParent={ this.state.autoExpandParent }
                >
                    { this.renderTreeNodes(treeData) }
                </Tree>
            </Modal>
        );
    }
}

Dialog.propTypes = {
    item: PropTypes.object,
    onOk: PropTypes.func,
};

export default Dialog;